<template>
  <div id="ap">
<!--  <template>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" icon="el-icon-chat-dot-round">
          <el-tab-pane class="yt" label="我发出的评论"  name="first"></el-tab-pane>
      </el-tabs>
  </template>-->
      <span slot="content" class="custom-content" style="font-weight: bold;">我发出的评论:</span>
    <br>
    <br>
    <br>

<!--    </el-page-header>
  </template>-->
<!--  <el-page-header class="yt" @back="goBack" content="我发出的评论:"></el-page-header>-->

  <div class="user-comments" v-if="comments.length > 0">
    <div class="comment-card" v-for="comment in sortedComments" :key="comment.id">
      <div class="comment-info">
        <img class="comment-avatar" :src="comment.icon" alt="User Avatar">
        <div>
          <div class="comment-title">{{ comment.title }}</div>
          <div class="icon-container">
            <el-button icon="el-icon-delete" circle style="font-size: 15px;
            background-color: transparent;" @click="handleIconClick(comment.id)"></el-button>
          </div>
          <div class="comment-time">评论发布时间:{{ comment.createTime }}</div>
        </div>
      </div>
      <div class="comment-content">
        {{ comment.content }}
      </div>
    </div>
  </div>

    <div v-else style="color: #42b983;font-size:25px;
    text-decoration: underline;font-style: italic;
    position: absolute; top: 30%; left: 30%;
    transform: translate(-50%, -50%); text-align: center;">
      您暂未发布评论哦~
    </div>

  </div>

</template>

<script>
export default {
  name: "PersonalCommentsList",
  data(){
    return {
      comments: [
      ],
    };
  },
  mounted() {
    this.getCommentsFromBackend();
    console.log(this.comments)
  },
  computed: {
    sortedComments() {
      // 根据评论的发布时间（createTime）进行排序，由近及远
      return this.comments.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
    }
  },
  methods: {
    getCommentsFromBackend() {
      // 执行异步请求，获取后端数据库的评论数据
      // 假设使用 axios 进行网络请求
      let id = localStorage.getItem("currentUserId");
      console.log(id);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get('http://localhost:9090/v1/comment/'+id+'/selectPersonalAll')  // 假设接口路径为 ''
          .then(response => {
            this.comments = response.data.data
          })
          .catch(error => {
            console.error(error);
          });
    },
    handleIconClick(commentId) {
      this.$confirm('您确认要删除吗?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击了确认按钮
        this.deleteComment(commentId);
      }).catch(() => {
        // 用户点击了取消按钮或关闭了消息框
        // 执行其他操作或不做任何处理
      });
    },

    deleteComment(commentId) {
      // 执行异步请求删除评论的操作
      // 根据具体情况替换API地址和请求方式
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .delete(`http://localhost:9090/v1/comment/${commentId}/delete`)
          .then(response => {
            // 删除成功后的处理逻辑
            // 从comments数组中移除对应的评论数据
            const index = this.comments.findIndex(comment => comment.id === commentId);
            if (index !== -1) {
              this.comments.splice(index, 1);
            }

            // 触发视图更新
            this.$forceUpdate();
          })
          .catch(error => {
            // 请求出错或删除失败的处理逻辑
            console.error(error);
          });
    },
    goBack(){
      console.log('返回按钮被点击了');
      history.go(-1);
    },
  },
};
</script>

<style scoped>
#ap {
  padding: 20px 50px 20px 70px;
}

.user-comments {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.comment-card {
  width: calc(50% - 40px);
  margin-bottom: 40px;
  margin-right: 30px;

  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.comment-avatar {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  margin-right: 10px;
  border-width: 1px;
  border-style: ridge; /*使用三维凸起效果绘制边框*/
}

.comment-info {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
}

.comment-title {
  font-size: 18px;
  font-weight: bold;
}

.comment-time {
  font-size: 14px;
  color: #999;
}

.comment-content {
  padding: 10px;
  border-top: 1px solid #ebeef5;
}
.yt{
  color: #42b983;
  margin-bottom: 30px;
  /*font-size: 200px;*/
}
.custom-content {
  color:#42b983;
  font-size: 20px;
}
.icon-container {
  padding-left: 300px; /* 向右移动的距离 */
}
</style>